<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 <style>
   *{
     user-select: none;
   }
    .box {
      border: 1px solid gray;
      width: 1200px;
      background-color: rgba(0, 0, 0, 0.074);
    }
    .total {
      /* border: 1px solid gray; */
      width: 97%;
      height: 100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      text-align: center;
      background-color: white;
      border-radius: 10px;
    }
    .total > div:nth-child(1) {
      width: 150px;
    }
    .total > div:nth-child(2) {
      width: 350px;
    }
    .vipList {
      /* border: 1px solid gray; */
      width: 97%;
      height: 570px;
      margin: 0 auto;
      background-color: white;
      border-radius: 10px;
      position: relative;
    }
    .model{
      position: absolute;
      border: 1px solid  rgba(128, 128, 128, 0.299);   
      background-color: white;
      width: 362px !important;
      height: 570px !important;
      right: -290px;
      border-radius: 10px;
      z-index: 999;
      /* 初始为隐藏 */
      display: none;
    }
    .model>div>input{
      border: gray;
      outline: none;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.054);
    }
    .model>div:nth-child(4){
      margin-left: 20px;
    }
    .can_no{
      position: absolute;
      right: 9px;
      top: 2px;
      font-size: 20px;
      color: rgba(255, 30, 0, 0.707);
    }
    .no-ca:hover{
      cursor: pointer;
      opacity: 0.8;
    }
    .show{
      display: block;
      /* transition: all 0.5s; */
       transform: translateX(-290px);
      animation: showDiv ease-in-out 1s normal;
    }
    @keyframes showDiv {
      0%{
        transform: translateX(-180px);
        opacity:0.3; 
      }
      100%{
        transform: translateX(-290px);
        opacity:999; 
      }
    }
    select{
      outline: none;
      width: 172px;
      background-color: rgba(0, 0, 0, 0.054);
      border: gray;
      height: 25px;
    }
    .cli{
      margin-top: 16px;
      width: 130px;
      display: flex;
      justify-content: space-between;
    }
    .cli>div>input{
      width: 100%;
      height: 100%;
      border-radius: 44px;
      border: gray;
      background-color: rgba(0, 0, 0, 0.074);
    }
    .cli>div>input:hover{
      cursor:pointer;
      background-color: purple;
      color: white;
      
    }
    .cli>div{
      /* border: 1px solid gray; */
      width: 53px;
      height: 32px;
      border-radius: 44px;
    }
    .head{
      /* border: 1px solid gray; */
      width: 60px;
      height: 60px;
      border-radius: 50px;
      background-color: rgba(94, 0, 128, 0.17);
      text-align: center;
      color: rgba(128, 0, 128, 0.428);
      font-size: 27px;
      line-height: 61px;
    }
    .gray {
      color: gray;
      font-size: 12px;
    }
    .font-weight {
      font-weight: 700;
    }
    .top1_right {
      margin-left: -30px;
      display: flex;
      justify-content: space-around;
    }
    .serach {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }
    /* .serach>div{

    } */
    .vip {
      margin-left: 20px;
      border-bottom: 5px solid rgba(128, 0, 128, 0.687);
    }
    .serinfo>input {    
      border: 1px solid rgba(128, 128, 128, 0); 
      border-radius: 10px;
      height: 25px;
      width: 200px;
      outline: none;
      background-color: rgba(0, 0, 0, 0.054);
      text-align: center;
 }
    .serinfo{
      width: 230px;
      /* border: 1px solid gray;  */
      position: relative;
    }
    /* 搜索框图标 */
    .sea{
      position: absolute;
      top: 6px;
      left: 11px;
      opacity: 0.8;
      color: rgba(128, 0, 128, 0.551);
    }
    .bak_gray{
      display: flex;
      justify-content: space-around;
      border-radius: 14px;
      margin: 0 auto;
      width: 98%;
      height: 40px;
      color: gray;
      line-height: 38px;
      background-color: rgba(128, 128, 128, 0.17);
    } 
    .showInfo{
      margin: 0 auto;
      /* border: 1px solid gray; */
      width: 98%;
      /* height: 300px; */
      border-radius: 14px; 
    } 
    .showInfo>div{
      margin: 0 auto;
      border-bottom: 1px solid rgba(128, 128, 128, 0.673);
      width: 100%;
      height: 55px;
      /* border-radius: 14px; */
      display: flex;
      text-align: center;
      /* margin-bottom: 10px; */
      /* align-items: center; */
    }
    .showInfo>div:hover{
      cursor: pointer;
      background-color: rgba(128, 128, 128, 0.095);
      border-bottom:1px solid  rgba(0, 128, 0, 0.728);
      transition: all 0.8s;
    }
    .showInfo>div>div{
      line-height: 57px;
    }
    .showInfo>div>div:nth-child(1){
      width: 151px;
    }
    .showInfo>div>div:nth-child(2){
      width: 211px;
    }
    .showInfo>div>div:nth-child(3){
      width: 95px;
    }
    .showInfo>div>div:nth-child(4){
      width: 230px;
    }
    .showInfo>div>div:nth-child(5){
      width: 121px;
    }
    .showInfo>div>div:nth-child(6){
      width: 206px;
    }

    .showInfo>div>div:nth-child(7){
      width: 115px;
    } 
    button{
      border: 1px solid gray;
      width: 54px;
      height: 35px;
      overflow: hidden;
      line-height: 2 !important;
      border-radius: 5px !important;
    }
    .tit>div{
      /* border: 1px solid gray; */
      text-align: center;
      margin-left:42 px;
      width:187px;     
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .add{
      /* border: 1px solid gray; */
      border-radius: 15px;
      width: 120px;
      height: 45px;
      line-height: 41px;
      color: white;
      text-align: center;
      background-color: rgba(73, 0, 128, 0.823);
    }
    .add:hover{
      cursor: pointer;
      opacity: 0.9;
      transition: all 0.5s;
      /* color: orange; */
      color: white;
    }
    .page{
      /* border: 1px solid gray; */
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
    }
    .page>div:nth-child(even){
      /* border: 1px solid gray; */
      width: 424px;
      height: 90%;
    }
    ul li{
      list-style: none;
    }
  </style>
  <link rel="stylesheet" href="/lib/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/lib/js/bootstrap.bundle.min.js">
  <script src="/lib/js/jQuery.js"></script>
  <body>
    <div class="box">
      <br />
      <!-- 会员数量统计 -->
      <div class="total">
        <div>
          <span class="gray">会员数量</span>
          <br />
          <span class="font-weight">45</span>
        </div>
        <div class="top1_right">
          <div>
            <span class="gray">新增会员</span>
            <br />
            <span class="font-weight">45</span>
          </div>
          <div>
            <span class="gray">当日访问量</span>
            <br />
            <span class="font-weight">45</span>
          </div>
        </div>
      </div>
      <br />
      <!-- 会员列表统计 -->
      <div class="vipList">
       <!-- 弹出层 -->
        <div class="model">
        <h4>添加成员</h4>
        <div class="can_no">
          <i class="fa fa-remove no-ca" aria-hidden="true" /></i>
        </div>
        <!-- 头像 -->
        <div class="head">
          <i class="fa fa-plus" aria-hidden="true" /></i>
        </div>
        <!-- add信息 -->
        <div>
          <br>
          姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text">
          <br>
          <br>
          <br>
          性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="" id=""> 
            <option value="null">请选择性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          <br>
          <br>
          <br>
          身份证号：<input type="text">
          <br><br>
          <br>
          手机号码：<input type="text">
          <br><br>
          <br><br><br>
          <!-- cancel OR unCancel -->
          <div class="cli">
            <div>
              <input class="yes" type="submit" value="确认">
            </div>
            <div>
              <input class="no" type="submit" value="取消">
            </div>
          </div>
        </div>
        </div>
        <br>
        <!-- 搜索栏位 -->
        <div class="serach">
          <div>
            <div class="vip">会员列表</div>
          </div>
          <div class="serinfo">
            <i class="fa fa-search sea" aria-hidden="true" /></i>
            <input type="text" placeholder="        搜索" /></div>
        </div>
        <br>
        <!-- 列表导航 -->
            <div class="bak_gray">
              <div>序号</div>
              <div>会员名称</div>
              <div>性别</div>
              <div>会员号</div>
              <div>开卡时间</div>
              <div>金额</div>
              <div>操作</div>
            </div>
            <br>         
            <!-- 信息呈现框 -->
            <div class="showInfo">
              <div>
              <div>01</div>
              <div class="tit">
              
                <div>
                  这里是sd
                </div>             
              </div>
              <div>男</div>
              <div>
                  511781200107052390
              </div>
              <div>
                88小时
              </div>
              <div>
                16
              </div>
              <div>
                <button>充值</button>
                <!-- <button>充值</button> -->
              </div>
              </div>
              <div>
                <div>01</div>
                <div class="tit">
                 
                  <div>
                    这里是sd
                  </div>             
                </div>
                <div>男</div>
                <div>
                    511781200107052390
                </div>
                <div>
                  88小时
                </div>
                <div>
                  16
                </div>
                <div>
                  <button>充值</button>
                  <!-- <button>充值</button> -->
                </div>
                </div>
                <div>
                  <div>01</div>
                  <div class="tit">
                   
                    <div>
                      这里是sd
                    </div>             
                  </div>
                  <div>男</div>
                  <div>
                      511781200107052390
                  </div>
                  <div>
                    88小时
                  </div>
                  <div>
                    16
                  </div>
                  <div>
                    <button>充值</button>
                    <!-- <button>充值</button> -->
                  </div>
                  </div>
                  <div>
                    <div>01</div>
                    <div class="tit">
                    
                      <div>
                        这里是sd
                      </div>             
                    </div>
                    <div>男</div>
                    <div>
                        511781200107052390
                    </div>
                    <div>
                      88小时
                    </div>
                    <div>
                      16
                    </div>
                    <div>
                      <button>充值</button>
                      <!-- <button>充值</button> -->
                    </div>
                    </div>
                    <div>
                      <div>01</div>
                      <div class="tit">                      
                        <div>
                          这里是sd
                        </div>             
                      </div>
                      <div>男</div>
                      <div>
                          511781200107052390
                      </div>
                      <div>
                        88小时
                      </div>
                      <div>
                        16
                      </div>
                      <div>
                        <button>充值</button>
                        <!-- <button>充值</button> -->
                      </div>
                      </div>
            </div>
            <br>
            <br>
         <!-- 分页 -->
        <div class="page">
          <div class="add">
            + &nbsp;
            添加会员
          </div>
          <div>
            <!-- 分页 -->
            <div class="mid">
              <input type="hidden" name=cpage value="">
              <div class="text-center">              
                <nav aria-label="Page navigation example" class=" my-2">
                  <ul class="pagination justify-content-center">
                    <li class="page-item" name="bef" style=""><a
                      class="page-link" title="上一页" href="" id="" name="lastOne"
                      aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <!--  DOM操作-->
                    <li class="page-item" aria-current="page"><a href="" class="page-link">1</a></li>
                    <li class="page-item" aria-current="page"><a href="" class="page-link">2</a></li>
                    <li class="page-item" aria-current="page"><a href="" class="page-link">3</a></li>
                    <li class="page-item" aria-current="page"><a href="" class="page-link">4</a></li>
                    <li class="page-item" aria-current="page"><a href="" class="page-link">5</a></li>
                    <li class="page-item" aria-current="page"><a href="" class="page-link">6</a></li>

                    <!--  DOM操作-->
                    <li class="page-item" name="nef" style=""><a
                      class="page-link" id="" title="下一页" href="" name="next"
                      aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                    </a></li>
                  </ul>
                </nav>
                <span class="gray">第 <span class="first">1</span> 页，共 <span class="totals">20</span> 页，共
                <span class="count">5</span> 条数据，每页显示 <span class="pagesize">6</span>
                条数据</span>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <script>
      var cli=document.querySelector('.add')    
      cli.addEventListener('click',function(){
        var mod=document.querySelector('.model')
        mod.classList.add('show')
      })
      // 取消按钮
      var cancel=document.querySelector('.no')
      var cancel2=document.querySelector('.no-ca')
      can(cancel)
      can(cancel2)
      function can(no){
        no.addEventListener('click',function(){
        var mod=document.querySelector('.model')
        mod.classList.remove('show')
      })
      }
     
    </script>
  </body>
</html>
